<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="utf-8">
    <title>index.js - Documentation</title>
    
    
    
        <meta name="keywords" content="webpack ES6 " />
        <meta name="keyword" content="webpack ES6 " />
    
    
    
    <meta property="og:title" content="test2"/>
    <meta property="og:type" content="website"/>
    <meta property="og:image" content=""/>
    
    <meta property="og:url" content=""/>
    
    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
    <script src="scripts/nav.js" defer></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
  <div class="navicon"></div>
</label>

<label for="nav-trigger" class="overlay"></label>

<nav class="wrap">
    
    <input type="text" id="nav-search" placeholder="Search" />
    
    <h2><a href="index.html">Home</a></h2><h2><a href="https://gitee.com/shanliangdeYWJ" target="_blank" class="menu-item" id="website_link" >码云shanliangdeYWJ</a></h2><h3>Tutorials</h3><ul><li><a href="tutorial-Overview.html">Overview</a></li></ul><h3>Namespaces</h3><ul><li><a href="initCompute.html">initCompute</a><ul class='methods'><li data-type='method' style='display: none;'><a href="initCompute.html#.div">div</a></li><li data-type='method' style='display: none;'><a href="initCompute.html#.minus">minus</a></li><li data-type='method' style='display: none;'><a href="initCompute.html#.mul">mul</a></li><li data-type='method' style='display: none;'><a href="initCompute.html#.plus">plus</a></li></ul></li><li><a href="initTools.html">initTools</a><ul class='methods'><li data-type='method' style='display: none;'><a href="initTools.html#.digitalize">digitalize</a></li><li data-type='method' style='display: none;'><a href="initTools.html#.getTarget">getTarget</a></li></ul></li></ul><h3>Global</h3><ul><li><a href="global.html#bindEvent">bindEvent</a></li><li><a href="global.html#init">init</a></li><li><a href="global.html#oBtnClick">oBtnClick</a></li><li><a href="global.html#oBtnGroup">oBtnGroup</a></li><li><a href="global.html#oCalculator">oCalculator</a></li><li><a href="global.html#oInputs">oInputs</a></li><li><a href="global.html#oResult">oResult</a></li><li><a href="global.html#renderResult">renderResult</a></li></ul>
</nav>

<div id="main">
    
    <h1 class="page-title">index.js</h1>
    

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>/**
 * @author 善良的YWJ
 * @Created by shanliangdeYWJ on 2020/11/29 12:22:58
 * @file index.js
 * @description
 * ```
 * 主文件
 * ```
 * @link [Github](https://github.com/shanliangdeYWJ)
 */

; (function (doc, initTools, initCompute) { // 立即执行函数传入形参
    /** 
     * @global
     * @type {HTMLCollectionOf&lt;Element>} 计算器 dom 元素
     */
    var oCalculator = doc.getElementsByClassName('J_calculator')[0],
        /** 
         * @global
         * @type {HTMLCollectionOf&lt;Element>} 计算器输出结果标签 dom 元素
         */
        oResult = oCalculator.getElementsByClassName('result')[0],
        /** 
         * @global
         * @type {HTMLInputElement} 计算器第一个输入值标签 dom 元素
         */
        oInputs = oCalculator.getElementsByTagName('input'),
        /** 
         * @global
         * @type {HTMLCollectionOf&lt;Element>} 计算器按钮组标签 dom 元素 
         */
        oBtnGroup = oCalculator.getElementsByClassName('btn-group')[0];

    console.log(oCalculator,
        oResult,
        oInputs,
        oBtnGroup);

    /**
     * 管理模块执行
     * @global
     * @description 
     * ```
     * init();
     * ```
     */
    var init = function () {
        bindEvent();
    };

    /**
     * 包裹绑定事件处理函数，防止暴露在独立作用于最外面
     * @global
     * @description
     * ```js
     * bindEvent();
     * ```
     */
    function bindEvent() {
        oBtnGroup.addEventListener('click', oBtnClick, false);
    }

    /**
     * 点击事件
     * @global
     * @param {Event} ev 事件对象
     */
    function oBtnClick(ev) {
        var tar = initTools.getTarget(ev),
            tagName = tar.tagName.toLowerCase();

        if (tagName === 'button') {
            var method = tar.getAttribute('data-method'),
                fVal = initTools.digitalize(oInputs[0].value),
                sVal = initTools.digitalize(oInputs[1].value);

            renderResult(initCompute[method](fVal, sVal));
        }
    }

    /**
     * 渲染结果函数
     * @global
     * @param {string|number} result 需要渲染的内容
     */
    function renderResult(result) {
        oResult.innerText = result;
    }

    init();
})(document, initTools, initCompute); // 立即执行函数的实参

// // 事件处理函数,button 的父级绑定事件处理函数可以通过事件对象，和事件原对象找到 button， 知识点：事件捕获，事件冒泡
// oBtnGroup.addEventListener('click', oBtnClick, false);

// /**
//  * 按钮父盒子绑定点击事件对象
//  * @param {Event} ev 事件
//  */
// function oBtnClick(ev) {
//     var e = ev || window.event,
//         tar = e.target || e.srcElement,
//         tagName = tar.tagName.toLowerCase();
//     if (tagName === 'button') {
//         var method = tar.getAttribute('data-method');
//         console.log(method);
//         fVal = Number(fInput.value.replace(/\s+/g, '')) || 0;
//         sVal = Number(sInput.value.replace(/\s+/g, '')) || 0;

//         switch (method) {
//             case 'plus': oResult.innerText = fVal + sVal; break;
//             case 'minus': oResult.innerText = fVal - sVal; break;
//             case 'mul': oResult.innerText = fVal * sVal; break;
//             case 'div': oResult.innerText = fVal / sVal; break;
//             default: break;
//         }
//     }
// }</code></pre>
        </article>
    </section>




    
    
</div>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.6</a> on Tue Dec 01 2020 08:42:14 GMT+0800 (GMT+08:00) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>

<script>prettyPrint();</script>
<script src="scripts/polyfill.js"></script>
<script src="scripts/linenumber.js"></script>

<script src="scripts/search.js" defer></script>


<script src="scripts/collapse.js" defer></script>


    <link type="text/css" rel="stylesheet" href="./shanliangdeYWJ.css">
    
</body>
</html>
